
$.fn.play = function(callbackConditions, callback) {
  var $this = $(this);

  $("body").removeClass("play");
  var aa = $("li.active",$this);
  if (aa.html() == undefined) {
    aa = $("li",$this).eq(0);
    aa.addClass("before")
    .removeClass("active")
    .next("li")
    .addClass("active")
    .closest("body")
    .addClass("play");
  } else if (aa.is(":last-child")) {
    $("li",$this).removeClass("before");
    aa.addClass("before").removeClass("active");
    aa = $("li",$this).eq(0);
    aa.addClass("active")
    .closest("body")
    .addClass("play");
  } else {
    $("li",$this).removeClass("before");
    aa.addClass("before")
    .removeClass("active")
    .next("li")
    .addClass("active")
    .closest("body")
    .addClass("play");
  }

  if(!callbackConditions) {
    var callbackConditions = [];
  }

  callbackConditions.push($this);

  var callB = true;

  for(var i = 0; i < callbackConditions.length; i++) {
    if ($('.active .inn',callbackConditions[i]).html() !== "0") {
      callB = false;
      break;
    }
  }

  if (!!callB) {
    callback();
  }
}

startTimer = function(fNumber) {
  timer = setInterval(function () {
    $third.play(null,function(){
      $second.play($third,function(){
        $first.play();
      });
    });
  }, fNumber.duration*2);
}

var $first = $('.firstDigit');
var $second = $('.secondDigit');
var $third = $('.thirdDigit');
var timer;

var FlappyNumber = function() {
  this.duration = 500; //ms

  getSpeed = function() {
    return this.duration;
  }

  setSpeed = function(duration) {
    this.duration = duration;
    var SPEED_STRING = this.duration + "ms";
    if ($('#mainStyle').length !== 0) {
      $('#mainStyle').remove();
    }
    $('<style id="mainStyle">body.play ul li.active {animation: chaos '+ SPEED_STRING +' '+ SPEED_STRING +' linear both;-webkit-animation: chaos '+ SPEED_STRING +' '+ SPEED_STRING +' linear both;} body.play ul li.active .down {animation: turn '+ SPEED_STRING +' '+ SPEED_STRING +' linear both;-webkit-animation: turn '+ SPEED_STRING +' '+ SPEED_STRING +' linear both;} body.play ul li.before .up { animation: turn2 '+ SPEED_STRING +' linear both; -webkit-animation: turn2 '+ SPEED_STRING +' linear both;} body.play ul li.before .up .shadow { animation: show '+ SPEED_STRING +' linear both; -webkit-animation: show '+ SPEED_STRING +' linear both;}body.play ul li.active .up .shadow {animation: hide '+ SPEED_STRING +' '+ SPEED_STRING +' linear both;-webkit-animation: hide '+ SPEED_STRING +' '+ SPEED_STRING +' linear both;}body.play ul li.before .down .shadow {animation: show '+ SPEED_STRING +' linear both;-webkit-animation: show '+ SPEED_STRING +' linear both;}body.play ul li.active .down .shadow {animation: hide '+ SPEED_STRING +' '+ SPEED_STRING +' linear both;-webkit-animation: hide '+ SPEED_STRING +' '+ SPEED_STRING +' linear both;}</style>').appendTo('head');
    clearInterval(timer);
    startTimer(this);
  }

  setSpeed(this.duration);
};

window.onload = function() {
  var fNumber = new FlappyNumber();
  var gui = new dat.GUI();
  var controller = gui.add(fNumber, 'duration', 0, 1000);
  controller.onChange(function(value){
    setSpeed(parseInt(value));
  });
}